<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jmpress.js | cube example</title>

	<meta name="description" content="jmpress.js is a jQuery plugin to build a website on the infinite canvas">
	<meta name="author" content="Kyle Robinson Young @shama & Tobias Koppers @sokra" />
	<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link href="cube.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="../../dist/jmpress.js"></script>
</head>
<body>

<div id="cube">
	<div class="step" id="front" data-z="-1000" data-up="#top" data-down="#bottom">
		FRONT
	</div>
	<div class="step" id="right" data-rotate-y="90" data-z="-1500" data-x="500" data-up="#top" data-down="#bottom">
		RIGHT
	</div>
	<div class="step" id="back" data-rotate-y="180" data-z="-2000" data-up="#top" data-down="#bottom">
		BACK
	</div>
	<div class="step" id="left" data-rotate-y="270" data-z="-1500" data-x="-500" data-up="#top" data-down="#bottom">
		LEFT
	</div>
	<div class="step" id="top" data-rotate-x="90" data-z="-1500" data-y="-500" data-up="#back" data-down="#front">
		TOP
	</div>
	<div class="step" id="bottom" data-rotate-x="270" data-z="-1500" data-y="500" data-up="#front" data-down="#back">
		BOTTOM
	</div>
</div>

<script type="text/javascript">
$(function() {
	var cube = $('#cube');
	$.jmpress("initStep", function(step, eventData) {
		eventData.stepData.up = eventData.data.up;
		eventData.stepData.down = eventData.data.down;
	});
	$.jmpress("register", "up", function() {
		var stepData = cube.jmpress("active").data("stepData");
		if(stepData.up)
			cube.jmpress("select", stepData.up);
	});
	$.jmpress("register", "down", function() {
		var stepData = cube.jmpress("active").data("stepData");
		if(stepData.down)
			cube.jmpress("select", stepData.down);
	});
	cube.jmpress({
		viewPort: {
			width: 2000,
			height: 2000
		},
		keyboard: {
			keys: {
				38: "up",
				40: "down"
			}
		}
	});
	cube.jmpress("route", ["#left", "#front"]);
	cube.jmpress("route", ["#top", "#right"], true);
	cube.jmpress("route", ["#top", "#left"], true, true);
	cube.jmpress("route", ["#bottom", "#left"], true, true);
	cube.jmpress("route", ["#bottom", "#right"], true);
});
</script>

</body>
</html>